﻿@model DistributeTransaction.Models.Order
@{
    ViewBag.Title = "Edit Payment";
}
<h2>@ViewBag.Title</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>


@using (Html.BeginForm("EditPayment", "ShoppingCart"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Payment</legend>
        @if (Model.Current.Amount > decimal.Zero)
        {
        <div class="editor-label">
            @Html.LabelFor(model => model.Current.CardNumber)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Current.AccountId, Model.Cards)
            <input type="button" name="button" id="AddNewCard" value="Add New Card" />
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Current.Amount)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Current.Amount)
            @Html.ValidationMessageFor(model => model.Current.Amount)
        </div>
        }
         <div class="editor-label">
            Total Amount: <span class="summary-label">@String.Format("{0:C}", @ViewBag.Amount)</span> 
            | Unpaid: <span class="summary-label">@ViewBag.Summary</span>
        </div>
        <p>
        @if (Model.Current.Amount != decimal.Zero)
        {
            <input type="submit" name="command" id="AddPayment" value="Add Payment" />
        }
        else
        {
            <input type="submit" name="command" id="Continue" value="Continue" />
        }
        </p>
        <div>
            @Html.Hidden("Unpaid", String.Format("{0:F2}", Model.Current.Amount))
            @Html.Hidden("Amount", ViewBag.Amount as string)
        </div> 
        <div>
            <table>
                <tr>
                    <th>
                    </th>
                    <th>
                        Holder Name
                    </th>
                    <th>
                        Card Number
                    </th>
                    <th>
                        Card Type
                    </th>
                    <th>
                        Amount
                    </th>
                </tr>
                @foreach (var item in Model.Payments)
                {
                    <tr>
                        <td>
                            @Html.ActionLink("Delete", "DeletePayment", "ShoppingCart", new { id = item.PaymentId }, new { id = item.PaymentId })
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.HoldName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.CardNumber)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.CardType)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Amount)
                        </td>
                    </tr>
                }
            </table>
        </div>
    </fieldset>
    <div id="edit-popup" title="Add New Card"></div>
}
<script type="text/javascript">
    $(document).ready(function () {

        //$("Current_Amount").val = $("Unpaid").val;
        document.getElementById("Current_Amount").value = document.getElementById("Unpaid").value;
        //add payment

        //Add Payment
        $("#AddPayment").live("click", function (e) {
            var v = parseFloat(document.getElementById("Current_Amount").value) - parseFloat(document.getElementById("Unpaid").value);
            if (v > 0) {
                alert("over payment!");
                return false;
            }
        });

        //Add New Card
        $("#AddNewCard").live("click", function (e) {
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: '@Url.Action("AddCard", "ShoppingCart")',
                cache: false,
                dataType: "json",
                success: function (mynote) {
                    $("#edit-popup").html(mynote.Html);
                    $("#edit-popup").dialog({
                        resizable: true,
                        height: 520,
                        width: 480,
                        modal: true,
                        buttons: {
                            Save: function () {
                                var holdName = $("#HoldName").val();
                                if (!holdName) {
                                    alert("Plese input holder name");
                                    return $("#HoldName").focus();
                                }
                                var cardNumber = $("#CardNumber").val();
                                if (!cardNumber) {
                                    alert("Plese input Card Number");
                                    return $("#CardNumber").focus();
                                }
                                var validCode = $("#ValidCode").val();
                                if (!validCode) {
                                    alert("Plese input valid Code");
                                    return $("#ValidCode").focus();
                                }
                                var cardType = $("#CardType").val();
                                var month = $("#ExpireMonth").val();
                                var year = $("#ExpireYear").val();
                                $.ajax({
                                    type: "POST",
                                    url: '@Url.Action("SaveCard", "Information")',
                                    data: { holdName: holdName, cardNumber: cardNumber, cardType: cardType, month: month, year: year, validCode: validCode },
                                    cache: false,
                                    dataType: "json",
                                    success: function (data) {
                                        if (data && data.Message) {
                                            var accountId = data.Message;
                                            //alert(accountId);
                                            $('#Current_AccountId').append($('<option></option>').val(accountId).html(cardNumber));
                                            $('#Current_AccountId > option[value="' + accountId + '"]').attr('selected', 'selected');
                                        }
                                        $("#edit-popup").dialog("close");
                                    }
                                }); //end save call

                            }, // end ok button
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function () {
                        } //end buttons
                    }); //end modal edit
                }
            }); //end ajax call
        }); //end add New Card
    });
</script>